<template>
	<view class="my_container">
		<view v-if="selectShow">
			<view class="nav">
				<view class="header">
					<view class="le" @click="headleBack">
						<image src="@/static/image/backhei.png"></image>
						<view>返回</view>
					</view>
					<view class="ri" :class="{'abolish':redact}" @click="headleRedact">{{redact?"取消":"修改"}}</view>
				</view>
			</view>
			<view class="user_container">
				<view class="user_head">
					<view class="head_img">
						<image :src="avatarUrl" @click="headleUpHead"></image>
						<view class="camera" @click="headleUpHead" v-if="redact">
							<image mode="aspectFill" src="../../static/image/camera.png"></image>
						</view>
					</view>
					<view v-if="!redact" class="name">{{nickName}}</view>
					<view class="inp" v-else>
						<image src="../../static/image/bianyi.png"></image>
						<input type="text" @input="headleNickName" :value="nickName" />
					</view>
				</view>

				<view class="basic">
					<view>基本信息</view>
				</view>
				<view class="message" :class="{'alter':redact}">
					<view class="item">
						<view class="le">
							<image src="../../static/image/birthday.png"></image>
							<view>生日</view>
						</view>
						<view class="ri" v-if="!redact">{{dateValues}}</view>
						<view v-else>
							<picker mode="date" @change="headleDateChenge">
								<view class="chooser">
									<view>{{dateValues}}</view>
									<image src="/static/image/ri.png"></image>
								</view>
							</picker>
						</view>
					</view>
					<view class="item">
						<view class="le">
							<image src="../../static/image/constellation.png"></image>
							<view>星座</view>
						</view>
						<view class="ri" v-if="!redact">{{constellationList[seatIndex]}}</view>
						<view v-else>
							<picker :range="constellationList" :value="seatIndex" @change="headleSeat">
								<view class="chooser">
									<view>{{constellationList[seatIndex]}}</view>
									<image src="/static/image/ri.png"></image>
								</view>
							</picker>
						</view>
					</view>
					<view class="item">
						<view class="le">
							<image src="../../static/image/stature.png"></image>
							<view>身高</view>
						</view>
						<view class="ri" v-if="!redact">{{heightList[HeightIndex]}}</view>
						<view v-else>
							<picker :range="heightList" :value="HeightIndex" @change="headleHeight">
								<view class="chooser">
									<view>{{heightList[HeightIndex]}}</view>
									<image src="/static/image/ri.png"></image>
								</view>
							</picker>
						</view>
					</view>
					<view class="item">
						<view class="le">
							<image src="../../static/image/city.png"></image>
							<view>现居城市</view>
						</view>
						<view class="ri" v-if="!redact">
							<view> {{cityProvinceValue}} · {{cityValue}}</view>
						</view>
						<view v-else @click="show=true">
							<view class="chooser">
								<view> {{cityProvinceValue}} · {{cityValue}}</view>
								<image src="/static/image/ri.png"></image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="le">
							<image src="../../static/image/status.png"></image>
							<view>现状</view>
						</view>
						<view class="ri" v-if="!redact">{{currentList[currenIndex]}}</view>
						<view v-else>
							<picker :range="currentList" @change="headleCurren">
								<view class="chooser">
									<view>{{currentList[currenIndex]}}</view>
									<image src="/static/image/ri.png"></image>
								</view>
							</picker>
						</view>
					</view>
					<view class="item">
						<view class="le">
							<image src="../../static/image/weixin.png"></image>
							<view>微信号</view>
						</view>
						<view v-if="!redact" class="ri">{{wechatValue}}</view>
						<input v-else type="text" @input="headleWechat" :value="wechatValue" placeholder="请输入微信号" />
					</view>
					<view class="item">
						<view class="le">
							<image src="../../static/image/phone.png"></image>
							<view>手机号码</view>
						</view>
						<view class="ri" v-if="!redact">{{phoneValue}}</view>
						<input v-else type="text" @input="headlePhone" :value="phoneValue" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="content">
					<view class="one">
						<view class="matching">
							<view class="basic title">匹配选项</view>
							<view class="message" :class="{'alter':redact}">
								<view class="item">
									<view class="le">
										<image src="../../static/image/jl.png"></image>
										<view>距离</view>
									</view>
									<view class="ri" v-if="!redact">{{suitedList[suitedIndex]}}匹配</view>
									<view v-else>
										<picker :range="suitedList" :value="suitedIndex" @change="headleSuited">
											<view class="chooser">
												<view>{{suitedList[suitedIndex]}}匹配</view>
												<image src="/static/image/ri.png"></image>
											</view>
										</picker>
									</view>
								</view>
								<view class="item">
									<view class="le">
										<image src="../../static/image/sf.png"></image>
										<view>身份</view>
									</view>
									<view class="ri" v-if="!redact">{{objList[objIndex]}}</view>
									<view v-else>
										<picker :range="objList" :value="objIndex" @change="headleObj">
											<view class="chooser">
												<view>{{objList[objIndex]}}</view>
												<image src="/static/image/ri.png"></image>
											</view>
										</picker>
									</view>
								</view>
								<view class="item">
									<view class="le">
										<image src="../../static/image/nl.png"></image>
										<view>年龄 </view>
									</view>
									<view class="ri" v-if="!redact">
										{{ageList[0][ageIndex[0]] +'-'+ ageList[1][ageIndex[1]]}}
									</view>
									<view v-else>
										<picker :range="ageList" mode="multiSelector" :value="ageIndex"
											@change="headleAge">
											<view class="chooser">
												<view>{{ageList[0][ageIndex[0]] +'-'+ ageList[1][ageIndex[1]]}}</view>
												<image src="/static/image/ri.png"></image>
											</view>
										</picker>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="two">
						<view class="oneself">
							<view class="space">
								<view class="basic">关于自己</view>
								<view class="select_tag" v-if="redact" @click="headleSelectTag(0)">
									<view>选择标签</view>
									<image src="../../static/image/tag_ri.png"></image>
								</view>
							</view>
							<view class="tag_box">
								<view v-for="(item,index) in checkedTagList" :key="index">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="two three">
						<view class="oneself">
							<view class="space">
								<view class="basic">喜欢的类型</view>
								<view class="select_tag" v-if="redact" @click="headleSelectTag(1)">
									<view>选择标签</view>
									<image src="../../static/image/tag_ri.png"></image>
								</view>
							</view>
							<view class="tag_box">
								<view v-for="(item,index) in checkedFondList" :key="index">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="redact" class="bom" @click="headleRevamp">
				<view>保存修改</view>
			</view>
		</view>
		<label-list v-else :tagList="tagList" :tagFontList="tagFontList" :state="state" :checkFondNum="checkFondNum"
			:checkNum="checkNum" @headleTag="headleTag" @headleFinish="headleFinish"></label-list>
		<!-- 省市区选择器 -->
		<u-picker mode="region" :params="params" v-model="show" @confirm="headleConfirm" :area-code='areaList'>
		</u-picker>
	</view>
</template>

<script>
	import labelList from '../../components/labelList.vue'
	import {
		getChecked
	} from '../../common/reuse.js'
	var util = require('../../components/util.js'); //require这个js模块  
	export default {
		components: {
			labelList
		},
		data() {
			return {
				nickName: '', //用户名
				avatarUrl: '', //用户头像
				//标签关于自己数组
				tagList: [],

				//标签喜欢类型数组
				tagFontList: [],
				redact: false, //编辑状态
				// 星座列表
				constellationList: ["白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座", "水瓶座", "双鱼座"],
				heightList: [], //身高列表
				show: false, //控制现居城市选择器显示隐藏
				currentList: ["学生党", "工作党"], //现状
				currenIndex: 0, //现状
				dateValues: '', //生日值
				seatIndex: 0, //星座值
				HeightIndex: 0, //身高值
				cityProvinceValue: '', //城市 省级 
				cityValue: '', //城市 市级
				//城市可选参数
				params: {
					province: true,
					city: true,
					area: false
				},
				areaList: [], //城市位置

				suitedList: ["同省", "同市", "不限"], //匹配位置
				suitedIndex: 0, //匹配位置 索引
				objList: ["学生党", "工作党", "不限"], //匹配身份 
				objIndex: 0, //匹配身份  索引
				ageList: [
					[],
					[]
				], //匹配年龄 
				ageIndex: [], //匹配年龄  索引
				ageValue: '',
				phoneValue: '',
				wechatValue: '',
				state: 0, //判断用户点击的是关于自己或喜欢类型
				checkNum: 0, //保存关于自己选中标签数量
				selectShow: true, //显示和隐藏标签列表
				checkedTagList: [], //选中关于自己标签数组
				checkFondNum: 0, //保存关于自己选中标签数量
				checkedFondList: [], //选中喜欢类型标签数组
			}
		},
		onLoad() {
			for (let i = 140; i <= 200; i++) {
				this.heightList.push(i + 'cm')
			}
			for (let i = 18; i <= 35; i++) {
				this.ageList[1].push(i === 35 ? i + '+' : i)
			}
			for (let i = 18; i <= 34; i++) {
				this.ageList[0].push(i)
			}
			this.getUserInfo()

		},

		methods: {
			// 返回上一页
			headleBack() {
				uni.navigateBack()
			},

			//用户输入昵称
			headleNickName(val) {
				console.log(val)
				this.nickName = val.detail.value
			},
			//上传头像回调
			headleUpHead() {
				let that = this
				if (this.redact) {
					uni.chooseImage({
						count: 1,
						success(res) {
							let tempFilePaths = res.tempFilePaths[0]
							uni.showLoading({
									title: '上传中...',
									mask: true
								}),
								uni.uploadFile({
									url: getApp().globalData.linkUrl + 'upload-img',
									filePath: tempFilePaths,
									name: 'imgFile',
									header: {
										'Authorization': uni.getStorageSync('token')
									},
									success(res) {
										console.log(res)
										let data = JSON.parse(res.data)
										if (data.code === 0) {
											that.avatarUrl = data.data.imgUrl
											uni.hideLoading()
										} else {
											uni.showToast({
												title: '文件格式错误',
												icon: 'none'
											})
											uni.hideLoading()
										}

									},
									fail(err) {
										console.log(err)
									}
								})
						}
					})
				}
			},
			// 编辑
			headleRedact() {
				this.redact = !this.redact
				this.getUserInfo()
			},
			//控制用户自身生日
			headleDateChenge(val) {
				console.log(val)
				this.dateValues = val.detail.value
			},
			//控制用户自身星座
			headleSeat(val) {
				console.log(val)
				this.seatIndex = val.detail.value
			},
			//控制用户自身身高
			headleHeight(val) {
				console.log(val)
				this.HeightIndex = val.detail.value
			},
			//用户自身现居城市值
			headleConfirm(val) {
				console.log(val)
				this.cityProvinceValue = val.province.label
				this.cityValue = val.city.label
				this.areaList[0] = val.province.value
				this.areaList[1] = val.city.value
			},
			//控制用户自身现状
			headleCurren(val) {
				this.currenIndex = val.detail.value
			},
			// 用户输入微信号
			headleWechat(val) {
				this.wechatValue = val.detail.value
			},

			//校验手机格式
			checkMobile(mobile) {
				return RegExp(/^1[3-9]\d{9}$/).test(mobile);
			},

			// 用户输入手机号
			headlePhone(val) {
				this.phoneValue = val.detail.value
			},
			//控制匹配对象距离
			headleSuited(val) {
				this.suitedIndex = val.detail.value
			},
			//控制匹配对象身份
			headleObj(val) {
				this.objIndex = val.detail.value

			},
			//控制匹配对象年龄
			headleAge(val) {
				if (val.detail.value[0] > val.detail.value[1]) {
					this.ageIndex.splice(0, 1, val.detail.value[0])
					this.ageIndex.splice(1, 1, val.detail.value[0] + 1)

				} else {
					this.ageIndex = val.detail.value
				}


			},


			//关于自己选择标签
			headleSelectTag(e) {
				this.selectShow = false
				this.state = e
				this.$myRequesy({
					url: 'tags',
					data: {
						state: e
					}
				}).then(res => {
					if (res.code === 0) {
						res.data.forEach(item => item.state = false)
						if (this.state === 0) {
							this.tagList = res.data
							this.tagList.forEach(item => {
								this.checkedTagList.forEach(item1 => {
									if (item.id === item1.id) {
										item.state = true
									}
								})
							})
						} else {
							this.tagFontList = res.data
							this.tagFontList.forEach(item => {
								this.checkedFondList.forEach(item1 => {
									if (item.id === item1.id) {
										item.state = true
									}
								})
							})
						}

					}

				})
			},

			//点击标签选中或取消
			headleTag(index) {
				if (!this.state) {
					this.checkNum = getChecked(this.state, this.checkNum, this.tagList, index, this.checkFondNum, this
						.tagFontList)[0]
				} else {
					this.checkFondNum = getChecked(this.state, this.checkNum, this.tagList, index, this.checkFondNum, this
						.tagFontList)[1]
				}
			},


			// 关于自己完成按钮回调
			headleFinish() {
				if (!this.state) {
					this.checkedTagList = this.tagList.filter(item => item.state)
				} else {
					this.checkedFondList = this.tagFontList.filter(item => item.state)
				}
				this.selectShow = true

				uni.pageScrollTo({
					scrollTop: 600,
					duration: 0
				})
			},

			//保存修改回调
			headleRevamp() {
				if (!this.wechatValue.trim() || !this.phoneValue.trim() || this.checkedTagList.length === 0 || this.checkedFondList.length === 0) {
					uni.showToast({
						title: "都是必填项!",
						icon: "none"
					})
				} else if (!this.checkMobile(this.phoneValue)) {
					uni.showToast({
						title: "请输入正确的手机格式",
						icon: "none"
					})
				} else {
					let that = this
					that.$myRequesy({
						url: 'all-info/update',
						method: 'POST',
						data: {
							nickName: this.nickName,
							avatarUrl: this.avatarUrl,
							birthday: this.dateValues,
							starSign: this.seatIndex,
							height: this.heightList[this.HeightIndex].slice(0, 3),
							province: this.cityProvinceValue,
							city: this.cityValue,
							phone: this.phoneValue,
							wechat: this.wechatValue,
							situation: parseInt(this.currenIndex),
							match_distance: parseInt(this.suitedIndex),
							match_situation: parseInt(this.objIndex),
							match_min_age: this.ageList[0][this.ageIndex[0]] === "35+" ? 35 : this.ageList[0][this
								.ageIndex[0]
							],
							match_max_age: this.ageList[1][this.ageIndex[1]] === "35+" ? 35 : this.ageList[1][this
								.ageIndex[1]
							],
							my_tags: this.checkedTagList.map(item => item.id),
							like_tags: this.checkedFondList.map(item => item.id)
						}
					}).then(res => {
						if (res.code === 0) {
							that.getUserInfo()

							uni.pageScrollTo({
								scrollTop: 0,
								duration: 0
							})
							that.redact = false
						}
					})
				}
			},
			//获取我的基本信息
			getUserInfo() {
				this.$myRequesy({
					url: 'user/all-info',
				}).then(res => {
					if (res.code === 0) {
						this.nickName = res.data.nickName
						this.avatarUrl = res.data.avatarUrl
						this.dateValues = res.data.birthday
						this.seatIndex = res.data.starSign
						this.HeightIndex = res.data.height - 140
						this.cityProvinceValue = res.data.province
						this.cityValue = res.data.city
						this.phoneValue = res.data.phone
						this.wechatValue = res.data.wechat
						this.currenIndex = res.data.situation
						this.suitedIndex = res.data.match_distance
						this.objIndex = res.data.match_situation
						this.ageIndex[0] = res.data.match_min_age - 18
						this.ageIndex[1] = res.data.match_max_age - 18
						this.checkedTagList = res.data.my_tags
						this.checkedFondList = res.data.like_tags
						this.checkNum = res.data.my_tags.length
						this.checkFondNum = res.data.like_tags.length
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.my_container {
		padding-bottom: 200upx;

		.nav {
			width: 100%;
			height: 240upx;
			background-color: rgba(248, 247, 254, 100);
			padding: 40upx;

			.header {
				display: flex;
				justify-content: space-between;


				.le {
					display: flex;

					image {
						width: 36upx;
						height: 36upx;
						margin-right: 2upx;
					}
				}

				.ri {
					width: 128upx;
					height: 58upx;
					border-radius: 40upx;
					background-color: rgba(130, 113, 239, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 28upx;
					text-align: center;
					line-height: 58upx;
				}

				.abolish {
					background-color: rgba(255, 255, 255, 100);
					color: rgba(130, 113, 239, 100);
					text-align: center;
					border: 2upx solid rgba(130, 113, 239, 100);
				}
			}
		}

		.user_container {
			.user_head {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40upx;

				.head_img {
					width: 190upx;
					height: 190upx;
					background-color: rgba(255, 255, 255, 100);
					border: 6upx solid rgba(227, 222, 255, 100);
					border-radius: 50%;
					margin-bottom: 20upx;
					margin-top: -120upx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.camera {
						position: absolute;
						width: 76upx;
						height: 48upx;
						border-radius: 40upx;
						background-color: rgba(130, 113, 239, 100);
						display: flex;
						justify-content: center;
						align-items: center;
						top: -2rpx;
						right: -8rpx;

						image {
							width: 36upx;
							height: 36upx;
						}
					}
				}

				.name {
					color: rgba(0, 0, 0, 0.8);
					font-size: 30upx;
					font-weight: 600;
				}

				.inp {
					display: flex;
					justify-content: center;
					padding: 0upx 0upx 20upx 0upx;
					width: 300upx;
					border-bottom: 2upx solid rgba(232, 231, 244, 100);

					image {
						width: 42upx;
						height: 42upx;
						margin-right: 10upx;
					}

					input {
						width: 160upx;
						font-size: 30upx;
						font-weight: 600;
					}
				}
			}

			.basic {
				padding: 40upx 40upx 32upx 62upx;
				border-bottom: 2upx solid rgba(244, 245, 245, 100);
				color: rgba(0, 0, 0, 0.8);
				font-size: 30upx;
				position: relative;
				font-weight: 600;
			}

			.basic:before {
				position: absolute;
				content: "";
				background-color: rgba(130, 113, 239, 100);
				width: 6upx;
				height: 34upx;
				left: 40upx;
				top: 43rpx;
			}

			.message {
				padding: 0upx 40upx;

				.item {
					display: flex;
					justify-content: space-between;
					color: rgba(0, 0, 0, 0.8);
					margin: 40upx 0upx;

					.le {
						display: flex;
						align-items: center;
						color: rgba(16, 16, 16, 0.45);

						image {
							width: 42upx;
							height: 42upx;
							margin-right: 8upx;
						}
					}

					.ri {
						color: rgba(0, 0, 0, 0.8)
					}

					input {
						text-align: right;
						margin-right: 12upx;
					}
				}
			}

			.alter {
				padding-right: 30upx;
			}

			.content {
				background-color: rgba(247, 246, 254, 100);

				.one {
					padding: 20upx 0upx;

					.matching {
						width: 100%;
						height: 400upx;
						background-color: #fff;

						.message {
							padding-top: 36upx;

							.item {
								margin-top: 0upx;
							}
						}
					}
				}

				.two {
					padding: 20upx 0upx;

					.oneself {
						.space {
							display: flex;
							justify-content: space-between;
							padding-right: 30upx;
							border-bottom: 2upx solid rgba(244, 245, 245, 100);

							.basic {
								border: none;
							}
						}

						background-color: #fff;

						.tag_box {
							padding: 38upx 20upx 20upx 40upx;
							display: flex;
							flex-wrap: wrap;

							view {
								background-color: #8271ef;
								color: #fff;
								font-weight: 600;
								height: 64rpx;
								line-height: 64rpx;
								font-size: 28rpx;
								margin: 0rpx 20rpx 30rpx 0rpx;
								border-radius: 200rpx;
								padding: 0rpx 30rpx;
							}
						}
					}

					.select_tag {
						display: flex;
						align-items: center;
						color: rgba(130, 113, 239, 100);
						font-size: 28upx;

						image {
							width: 40upx;
							height: 40upx;
						}
					}
				}

				.three {
					padding: 0;
					margin-bottom: 220upx;
				}
			}
		}

		.chooser {
			display: flex;

			image {
				width: 42upx;
				height: 42upx;
				margin-left: 8upx;
			}
		}

		.bom {
			width: 100%;
			height: 120upx;
			border-radius: 30upx 30upx 0px 0px;
			background-color: rgba(246, 244, 255, 100);
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 99;

			view {
				width: 690upx;
				height: 84upx;
				line-height: 84upx;
				border-radius: 50upx;
				background-color: rgba(130, 113, 239, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				text-align: center;
				box-shadow: 0px 0px 4upx 0px rgba(247, 218, 254, 100);
				font-family: Microsoft Yahei;
				border: 2upx solid rgba(0, 0, 0, 0.05);
				font-weight: 600;
			}
		}
	}
</style>
